@import '../c_themes/theme.scss'; 

// 顶栏
.vip-desc-nav-bar .uni-navbar__content .uni-navbar__header {
	background-color: $dark-color !important;
	background-image: none !important;
	padding: 0;
}
// 顶栏按钮
.vip-desc-nav-bar .uni-navbar__header-container .top-nav-button{
	color: $weakest-color !important;
	padding: 0 20rpx;
}
// 顶栏按钮-选中
.vip-desc-nav-bar .uni-navbar__header-container .top-nav-button-selected {
	border-bottom: 4rpx solid $important-color;
}

// 顶栏按钮
.vip-desc-nav-bar .uni-navbar__header .uni-navbar__header-btns {
	width: 80rpx !important;
	display: flex;
	justify-content: center !important;
	font-size: 56rpx;
	font-family: iconFonts;
	color: $weakest-color !important;
}
	// 按钮鼠标样式
	.vip-desc-nav-bar .uni-navbar__header .uni-navbar__header-btns.uni-navbar__header-btns-right{
		cursor: default;
	}
	// 图标
	.vip-desc-nav-bar .uni-navbar__header .uni-navbar__header-btns.uni-navbar__header-btns-left::before{
		content: $icon-back;
	}
	.vip-desc-nav-bar .uni-navbar__header .uni-navbar__header-btns.uni-navbar__header-btns-right::before{
		content: $icon-scan;
		display: none;
	}
	
// 信息内容
.desc-info-content {
	padding: 0 30rpx;
	background-color: #FFF;
	text-align: center;
}
// vip卡
.desc-card {
	margin: 20rpx 0;
	border-radius: 40rpx;
	background-size: 100% 100%;
	color: $dark-color;
}
	// vip
	.desc-card.vip {
		background-color: $vip-nickName-color;
		background-image: url('~@/static/scssImages/c_account-info/VIP-card-bg.webp');
		box-shadow: 0 4px 20px rgba(255, 104, 125, 0.5);
	}
	// svip
	.desc-card.svip {
		background-color: $svip-nickName-color;
		background-image: url('~@/static/scssImages/c_account-info/SVIP-card-bg.webp');
		box-shadow: 0 4px 20px rgba(255, 165, 0, 0.5);
	}
	// 用户信息
	.desc-card .account-info {
		padding: 30rpx 30rpx 0rpx 30rpx;
		text-align: left;
	}
	// 用户信息-账户
	.desc-card .account-info .account-id {
		font-size: $small-fontSize;
		color: $dark-color;
	}
	// vip等级进度条
	.desc-card .wrap-vip-exp-bar {
		display: flex;
		flex-wrap: wrap;
		padding: 15rpx;
		align-items: baseline;
		justify-content: center;
	}
		// 等级文字
		.desc-card .wrap-vip-exp-bar text {
			font-weight: bold;
			font-size:$small-fontSize;
		}
		// 当前文字
		.desc-card .wrap-vip-exp-bar text.now-level {
			font-size: $title3-fontSize;
		}
		// 进度条背景
		.desc-card .wrap-vip-exp-bar .exp-bar-bg {
			border-radius: $larger-border-radius;
			background-color: rgba(0, 0, 0, 0.25);
			box-shadow: 0 2rpx 0 rgba(255, 255, 255, 0.25);
			width: 80%;
			height: 12rpx;
			margin: 0 10rpx;
		}
			// 进度条
			.desc-card .wrap-vip-exp-bar .exp-bar-bg .exp-bar {
				background-color: #FFF;
				height: 12rpx;
				border-radius: $larger-border-radius;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				min-width: 2% !important;
				}
			// 进度条
			.desc-card .wrap-vip-exp-bar .exp-bar-bg .exp-bar .bar-scroll {
				background: #FFF;
				width: 24rpx;
				height: 24rpx;
				margin-right: -12rpx;
				border-radius: $larger-border-radius;
				box-shadow: 0 0 20rpx #FFF;
				animation: vip-exp-bar-scroll alternate 0.25s ease-in-out 0s infinite;
			}
	// 进度说明
	.desc-card .wrap-vip-exp-bar .exp-info {
		margin-top: 10rpx;
		background-color: rgba(0, 0, 0, 0.2);
		padding: 0 10rpx;
		border-radius: $larger-border-radius;
		font-size: $small-fontSize;
		color: $weakest-color;
	}
	// 底栏
	.desc-card .desc-card-bottom-bar {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		padding: 20rpx 20rpx;
		color: #FFF;
		border-radius: 0 0 $larger-border-radius $larger-border-radius;
	}
		// vip
		.desc-card.vip .desc-card-bottom-bar {
			background-color: $vip-nickName-color;
			border-top:2rpx solid #FD687D;
		}
		// svip
		.desc-card.svip .desc-card-bottom-bar {
			background-color: $svip-nickName-color;
			border-top:2rpx solid #CFB385;
		}
		// 等级
		.desc-card .desc-card-bottom-bar .vip-title {
			font-size: $title2-fontSize;
			font-weight: bold;
		}
		// 时间
		.desc-card .desc-card-bottom-bar .end-time {
			flex: auto;
			text-align: left;
			padding-left: 10rpx;
		}
		// 续费按钮
		.desc-card .btn-renewal {
			background-color: #fff;
			border-radius: $larger-border-radius;
			padding: 20rpx 20rpx 20rpx 40rpx;
			font-size: $normal-fontSize;
			color: $important-color;
		}
		// 续费按钮-图标
		.desc-card .btn-renewal .fontIcon{
			color: $important-color;
			margin: 0;
			padding: 0;
		}

// 信息卡标题
.desc-info-title {
	display: flex;
	font-size: $title2-fontSize;
	font-weight: bold;
	justify-content: space-between;
	align-items: center;
	margin-top: 10rpx;
	}
	// 标题线
	.desc-info-title::after {
		content: "";
		border-bottom-width: 4rpx;
		border-bottom-style: solid;
		margin-left: 10rpx;
		flex: auto;
		height: 0rpx;
		display: flex;
		align-items: center;
	}
	// vip
	.desc-info-content.vip .desc-info-title {color: $vip-nickName-color;}
	.desc-info-content.vip .desc-info-title::after{ border-bottom-color: $vip-nickName-color; }
	// svip
	.desc-info-content.svip .desc-info-title {color: $svip-nickName-color;}
	.desc-info-content.svip .desc-info-title::after{ border-bottom-color: $svip-nickName-color; }
// 信息卡	
.desc-info-card {
	border-radius: $common-border-radius;
	text-align: left;
	padding: 20rpx;
	margin-top: 10rpx;
	color: $dark-color;
}
	// vip
	.vip .desc-info-card {color: $vip-nickName-color;}
	// svip
	.svip .desc-info-card {color: $svip-nickName-color;}
	// 内容
	.desc-info-card .content {
		display: flex;
		justify-content: space-between;
	}
	.desc-info-content .wrap-multiple-card {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	// 信息卡
	.desc-info-content .desc-info-card{
		background-color: #FFF;
		border-radius: $common-border-radius;
		border-width: 2rpx;
		border-style: solid;
		width: 43%;
		display: flex;
		// padding: 10rpx;
	}
		// 大卡内容
		.desc-info-content .desc-info-card.larger {
			width: 95%;
			border: none;
			display: block;
		}
		.vip.desc-info-content .desc-info-card{
			border-style: #E87373;
		}
		.vip.desc-info-content .desc-info-card{
			border-style: #E6CEA4;
		}
		// vip
		.desc-info-content.vip .desc-info-card.larger {
			background-color: #D50132;
			color: #FFF;
		}
		// svip
		.desc-info-content.svip .desc-info-card.larger {
			background-color: #2F323C;
			color: #FFDFA9;
		}
	// 图片容器
	.desc-info-content .desc-info-card .wrap-image {
		width: 80rpx;
		height: 80rpx;
		flex: none;
		border-radius: 100rpx;
		display: flex;
	}
		.vip.desc-info-content .desc-info-card .wrap-image {
			background-color: #D50132;
		}
		.svip.desc-info-content .desc-info-card .wrap-image {
			background-color: #CB9B4C;
		}
		.desc-info-content .desc-info-card.larger .wrap-image{
			background-color: transparent;
		}
		.desc-info-content .desc-info-card.larger .wrap-image {
			width: 150rpx;
			height: 150rpx;
			flex: none;
		}
		.desc-info-content .desc-info-card .wrap-image div {
			background-size: $common-bg-size !important;
			background-position: center;
		}
		.desc-info-content .desc-info-card .wrap-image div {
			background-size: $common-bg-size !important;
			background-position: center top;
		}
		.desc-info-content .desc-info-card .wrap-image image {
			width: 100% !important;
			height: 100% !important;
		}
	// 信息
	.desc-info-content .desc-info-card .wrap-info {
		padding-left: 10rpx;
		white-space: pre-line;
		line-height: 1.5;
		word-wrap: break-word;
	}
	// 信息内容-名字
	.desc-info-content .desc-info-card .wrap-info .info-name{
		font-weight: bold;
		font-size: $title2-fontSize;
	}
		// 信息内容-名字
		.desc-info-content .desc-info-card.larger .wrap-info .info-name{
			color: #FFF7E4;
		}
		// 信息内容
		.desc-info-content .desc-info-card.larger .wrap-info .info-content{
			color: #FFFFFF;
		}
			// vip
			.vip.desc-info-content .desc-info-card.larger .wrap-info .info-content{
				color: #FFFFFF;
			}
			// svip
			.svip.desc-info-content .desc-info-card.larger .wrap-info .info-content{
				color: #FFDFA9;
			}
	// 信息内容-加强
	.desc-info-content .desc-info-card .wrap-info .strong {
		// display: block;
		font-weight: bold;
		font-size: $title3-fontSize;
	}
	// 信息底栏
	.desc-info-content .desc-info-card .info-bottom{
		border-top: 2rpx solid rgba(255, 255, 255, 0.5);
		width: 100%;
		flex: 0 0 none;
		flex-shrink: 0;
		margin-top: 20rpx;
		padding-top: 10rpx;
	}
	// 表格容器
	.table-content {
		display: flex;
		flex-wrap: wrap;
		padding-top:20rpx;
	}
		// 表格
		.table-content .info-table {
			padding: 0;
			margin: 0;
			font-size: $small-fontSize;
			text-align: left;
			flex: auto;
		}
		.table-content .info-table th,.table-content .info-table td {
			border: 2rpx solid rgba(255, 255, 255, 0.5);
			padding: 0rpx 10rpx;
			height: 48rpx;
			color: $dark-color;
		}
		.table-content .info-table th {color: #fff;}
		// vip
		.table-content .info-table.vip th {
			background-color: #E67475;
		}
		.table-content .info-table.vip tr td {
			background-color: #FDEEEB;
		}
		.table-content .info-table.vip tr td:nth-child(1),
		.table-content .info-table.vip tr td:nth-child(3){
			background-color: #FFD8DB;
		}
		// svip
		.table-content .info-table.svip th {
			background-color: #CB9B4C;
		}
		.table-content .info-table.svip tr td {
			background-color: #FFF5E1;
		}
		.table-content .info-table.svip tr td:nth-child(1),
		.table-content .info-table.svip tr td:nth-child(3)
		{
			background-color: #FBE6B7;
		}
// 底栏
.vip-desc-footBar {
	background-color: $dark-color !important;
	color: #FFF;
	padding-bottom: 40rpx;
	padding-top: 20rpx;
}
	// 支付按钮
	.vip-desc-footBar .full-btn {
		border-radius: $common-border-radius;
		background-color: #FFF;
		border:none;
		padding: 20rpx 0;
		overflow: hidden;
		position: relative;
		margin-top: 0;
		margin-bottom: 0;
	}
		// 图标
		.vip-desc-footBar .btn-set-pay::before {
			display: block;
			content: "";
			width: 50rpx;
			height: 50rpx;
			margin-right: 10rpx;
			background-repeat: no-repeat;
			background-size: $common-imgIcon-bg-size;
			background-position: center;
		}
		// 支付宝
		.vip-desc-footBar .btn-set-pay.ali::before {
			background-image: url('~@/static/scssImages/c_icon/ali-pay.webp');
		}
		// 微信
		.vip-desc-footBar .btn-set-pay.wechat::before {
			background-image: url('~@/static/scssImages/c_icon/wechat-pay.webp');
		}
		// 选择
		.vip-desc-footBar .btn-set-pay::after {
			display: block;
			content: $icon-check;
			font-family: iconFonts;
			color: $weakest-color;
			width: 50rpx;
			height: 40rpx;
			line-height: 40rpx;
			transform: scale(1) !important;
			background-color: $light-color;
			position: absolute;
			right: 0 !important;
			bottom: 0 !important;
			left: auto !important;
			top: auto !important;
			border-radius: 0;
			border-top-left-radius: $common-border-radius;
		}
		// 选中
		.vip-desc-footBar .btn-set-pay.selected::after {
			background-color: $important-color;
		}
	// 支付按钮
	.vip-desc-footBar .btn-pay {
		flex: none;
		font-weight: bold;
		background-color: $disable-color;
		font-size: $title2-fontSize;
		color: #FFF;
	}
	.vip-desc-footBar .btn-pay.enable {
		background-color: $golden-color;
	}
	// 支付协议
	.vip-desc-footBar .wrap-agreement {
		margin-top: 10rpx;
	}